"use strict";
; (function (w, d) {
    function Slidenav(o) {
        var el = d.getElementsByClassName(o.boxClass);
        [].forEach.call(el, function (e) {

            return new Slidenav.prototype.init(e, o);
        });
    }
    Slidenav.prototype = {
        constructor: Slidenav,
        defaults: {
            speed: 1000,
            delay: 2000,
            dot: false,
            arrow: false,
            start: 0,
            autoPlay: false,
            listClass: 'slidenav__slideshow',
            listItem: 'li',
            height: 'auto',
            animation: 'fade'
        },
        init: function (el, options) {


            var $this = this;
            this.element = el;
            this.wrapper = this.element.children[0];
            this.slides = el.children[0].children;
            this.slidesCount = this.slides.length;
            this.options = this._extend(this.defaults, options);
            this.current = options.start;

            this.slides[this.options.start].setAttribute('class', 'item active')
            var i = 0;
            for (i = 0; i < this.slidesCount; i++) {
                var slide = this.slides[i];
                this.transitionDuration(slide, this.options.speed);
                switch (slide.children[0].nodeName) {
                    case 'IMG':
                        slide.style.backgroundImage = "url(" + slide.children[0].getAttribute('src') + ")";
                        slide.style.backgroundSize = "cover";
                        slide.style.height = slide.childNodes[0].offsetHeight + 'px';
                        slide.removeChild(slide.childNodes[0]);
                        break;
                }
            }


            // this.transitionDuration(this.slides,this.options.speed)
            this.resize()
            this._showDot();
            this._showArrow();
            this._autoPlay();
        },
        _extend: function (parent, child) {
            for (var i in child) {
                parent[i] = child[i];
            }
            return parent;
        },
        _setIndex: function (index) {
            this.current = index;
        },
        _autoPlay: function () {

            if (!this.options.autoPlay)
                return false;
            var self = this;
            this._play()
            this.element.addEventListener("mouseover", function () {
                self._stop()
            })
            this.element.addEventListener("mouseout", function () {
                self._play()
            })
        },
        resize: function () {
            var height = this.options.height;

            if (this.options.height === 'auto') {

                height = 0;

                [].forEach.call(this.slides, function (e) {
                    height = Math.max(height, e.offsetHeight);
                });
            }

            this.wrapper.style.height = height + 'px';

        },
        _play: function () {

            var self = this;

            if (this.hasAnimate)
                return;
            this.t = setInterval(function () {
                self._next()
            }, this.options.delay | 0)
        },
        _stop: function () {
            var self = this;
            return clearInterval(self.t)
        },
        _prev: function () {
            this._to(this.current - 1)
        },
        _next: function () {
            this._to(this.current + 1)
        },
        _to: function (target) {
            // console.log(this.hasAnimate)
            if (this.current == target || this.hasAnimate)
                return;
            this.hasAnimate = true;
            if (target > this.slidesCount - 1)
                target = 0;
            if (target < 0)
                target = this.slidesCount - 1;
            var offset = target - this.current;

            if (this.options.dot) {
                this._dotChange(target)
            }

            var changeState = this.animations[this.options.animation].call(this, this.current, target);



            // var self = this;

            // var transitionFlag = true;
            // changeObject.addEventListener('transitionend', function (e) {

            //     if (e.target === e.currentTarget && transitionFlag) {
            //         transitionFlag = false;
            //         self._setIndex(target)
            //         if (self.current == target) {
            //             self.hasAnimate = false;
            //         }
            //     }
            // }, false)

            // changeObject.addEventListener('animationend', function (e) {

            //     if (e.target === e.currentTarget && transitionFlag) {
            //         transitionFlag = false;

            //     }
            // }, false)

            // console.log(changeState)
            // if (changeState) {

            // }


            return false;
        },
        change: function (o, offset) {
            this.translate(o._box, offset);
        },
        transitionDuration: function (ele, speed) {


            ele.style.webkitAnimationDuration = ele.style.MsAnimationDuration = ele.style.msAnimationDuration = ele.style.MozAnimationDuration = ele.style.OAnimationDuration = ele.style.AnimationDuration = speed + 'ms';
            ele.style.webkitTransitionDuration = ele.style.MsTransitionDuration = ele.style.msTransitionDuration = ele.style.MozTransitionDuration = ele.style.OTransitionDuration = ele.style.transitionDuration = speed + 'ms';

        },
        translate: function (ele, x) {
            this.transform(ele, 'translate3d(' + x + 'px, 0,0)');
        },
        transform: function (ele, transform) {
            var elStyle = ele.style;
            elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform;
        },
        _showArrow: function () {
            if (this.options.arrow == false) return false;

            var el_length = this.element.length;
            var prev = d.createElement('a');
            prev.setAttribute("href", "#");
            prev.setAttribute("class", "slidenav__arrow slidenav__arrow--prev");
            var next = d.createElement('a');
            next.setAttribute("href", "#");
            next.setAttribute("class", "slidenav__arrow slidenav__arrow--next");
            var arrowLeft = d.createElement('i');
            arrowLeft.className = 'icon iconfont';
            arrowLeft.innerHTML = '&#xf0001;';
            var arrowRight = d.createElement('i');
            arrowRight.className = 'icon iconfont';
            arrowRight.innerHTML = '&#xf0005';
            prev.appendChild(arrowLeft)
            next.appendChild(arrowRight)
            var self = this;
            prev.onclick = function () {
                self._prev();
                // self._stop()
            }
            next.onclick = function () {
                self._next();
                // self._stop()
            }
            this.element.appendChild(prev);
            this.element.appendChild(next);

        },
        _showDot: function () {

            if (this.options.dot == false) return false;

            var dotnav = d.createElement('ul');
            dotnav.setAttribute('class', 'slidenav__dotnav dotnav');
            this.element.appendChild(dotnav);
            var slidesCount = this.slidesCount;
            var dots = '';
            var self = this;
            for (var i = 0; i < slidesCount; i++) {
                var dot = d.createElement('li');
                if (i == this.current) {
                    var higtlight = 'slidenav__dotnav--state-highlight';
                } else {
                    var higtlight = '';
                }
                dot.setAttribute('class', 'dotnav__item ' + higtlight);
                (function (i) {
                    dot.onclick = function () {
                        self._to(i)
                        self._stop()
                    }
                })(i)
                dots += dot;
                dotnav.appendChild(dot)
            }
        },
        _dotChange: function (target) {
            var dots = this.element.getElementsByClassName('slidenav__dotnav')[0].childNodes;
            for (var i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(new RegExp("(\\s|^)" + 'slidenav__dotnav--state-highlight' + "(\\s|$)"), " ");
            }
            dots[target].className = dots[target].className + ' slidenav__dotnav--state-highlight';
        },
        animationEnd: function (target) {
            this._setIndex(target)
            if (this.current == target) {
                this.hasAnimate = false;
            }
        },
        animations: {
            fade: function () {
                var current = arguments[0], target = arguments[1];
                this.slides[target].style.opacity = 1;
                this.slides[current].className = this.slides[current].className + ' uk-slideshow-fade-out';

                var self = this;
                var transitionFlag = true;
                this.slides[current].addEventListener("animationend", function (e) {

                    if (e.target === e.currentTarget && transitionFlag) {
                        transitionFlag = false;

                        self.slides[target].className = self.slides[target].className + ' active';
                        self.slides[current].style.opacity = '';
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + 'uk-slideshow-fade-out' + "(\\s|$)"), "");
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + 'active' + "(\\s|$)"), "");
                        self.animationEnd.call(self, target)

                    }
                });

            },
            scroll: function () {
                var current = arguments[0], target = arguments[1];
                this.slides[target].style.opacity = 1;
                // var in,for,back;
                var currentWard;
                var targetWard;
                if (current < target) {
                    this.slides[target].className = this.slides[target].className + ' uk-slideshow-scroll-forward-in';
                    this.slides[current].className = this.slides[current].className + ' uk-slideshow-scroll-forward-out';
                    currentWard='uk-slideshow-scroll-forward-out';
                    targetWard='uk-slideshow-scroll-forward-in';

                } else {
                    this.slides[target].className = this.slides[target].className + ' uk-slideshow-scroll-backward-in';
                    this.slides[current].className = this.slides[current].className + ' uk-slideshow-scroll-backward-out';
                    currentWard='uk-slideshow-scroll-backward-out';
                    targetWard='uk-slideshow-scroll-backward-in';
                }
                var self = this;
                var transitionFlag = true;


                this.slides[current].addEventListener("animationend", function (e) {

                    if (e.target === e.currentTarget && transitionFlag) {
                        transitionFlag = false;
                        self.slides[current].style.opacity = '';
                        self.slides[target].className = self.slides[target].className.replace(new RegExp("(\\s|^)" + targetWard + "(\\s|$)"), "");
                        self.slides[target].className = self.slides[target].className + ' active';
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + currentWard + "(\\s|$)"), "");
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + 'active' + "(\\s|$)"), "");
                        self.animationEnd.call(self, target)

                    }
                });

            },
            scale: function () {
                var current = arguments[0], target = arguments[1];

                this.slides[target].style.opacity = 1;
                this.slides[current].className = this.slides[current].className + ' uk-slideshow-scale-out';

                var self = this;
                var transitionFlag = true;


                this.slides[current].addEventListener("animationend", function (e) {

                    if (e.target === e.currentTarget && transitionFlag) {
                        transitionFlag = false;
                        self.slides[target].className = self.slides[target].className + ' active';
                        self.slides[current].style.opacity = '';
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + 'uk-slideshow-scale-out' + "(\\s|$)"), "");
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + 'active' + "(\\s|$)"), "");
                        self.animationEnd.call(self, target)

                    }
                });

                this.slides[current].addEventListener("webkitAnimationEnd", function (e) {

                    if (e.target === e.currentTarget && transitionFlag) {
                        transitionFlag = false;
                        self.slides[target].className = self.slides[target].className + ' active';
                        self.slides[current].style.opacity = '';
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + 'uk-slideshow-scale-out' + "(\\s|$)"), "");
                        self.slides[current].className = self.slides[current].className.replace(new RegExp("(\\s|^)" + 'active' + "(\\s|$)"), "");
                        self.animationEnd.call(self, target)

                    }
                });

            }
        },
    }

    Slidenav.prototype.init.prototype = Slidenav.prototype;

    return w.slidenav = function (o) {
        new Slidenav(o);
    };
})(window, document)
